<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<u-search placeholder="搜索你想了解的问题..."  v-model="keywords" @search="search" focus  :animation="true"></u-search>
			</view>
		</view>

		<!-- 侧滑列表 -->
		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresh" @scrolltolower="loadmore">
			<view class="list">
				<u-swipe-action v-for="item in list">
					<u-swipe-action-item :options="action" @click="choose" :name="item.id">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="item">
								<view class="business">
									<view class="avatar">
										<image mode="aspectFit" :src="item.avatar_text" v-if="item.avatar_text"></image>
										<image mode="aspectFit" src="/static/logo.png" v-else></image>
									</view>
								</view>
								
								<view class="info">
									<p class="nickname" @click="ToBus(item.id)">{{ item.nickname }}</p>
									<view class="desc" v-if="item.intro">{{ item.intro }}</view>
									<view class="desc" v-else>这家伙很懒，什么也没写！</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true" @cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		onLoad()
		{
			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			this.ConcernData()
		},
		data()
		{
			return {
				triggered: false,
				finished: false,
				scrollTop: 0,
				keywords: '',
				page: 1,
				list:[],
				business: {},
				concernid:0,
				show: false,
				content: '是否确认取消关注',
				action: [{
                    text: '取消关注',
					style: {
						backgroundColor: 'rgb(245, 108, 108)',
					}
                }]
			}
		},
		methods:{
			ToBus(busid){
				uni.$u.route('/pages/business/center',{busid: busid})
			},
			choose(data){
				this.show = true
				// console.log(name)
				this.concernid = data.name
			},
			search()
			{
				this.list = []

				this.ConcernData()
			},
			confirm()
			{
				this.show = false
			},
			//上拉加载
			onReachBottom()
			{
				if(this.finished) return;

				this.page++
				this.ListData()
			},
			onPageScroll(e) 
			{
				this.scrollTop = e.scrollTop;
			},
			async ConcernData(){
				var data = {
					busid: this.business.id,
					page: this.page,
					keywords: this.keywords
				}

				var result = await uni.$u.http.post('/business/concerndata',data)

				this.triggered = false

				if(result.code == 0){
					this.finished = true
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{

					// console.log(result.data);
					this.list = this.list.concat(result.data)
				}
			},
			async confirm(){
				var data = {
					busid: this.business.id,
					concern: this.concernid
				}

				// console.log(data)
				var result = await uni.$u.http.post('/business/concern',data)

				this.show = false
				if(result.code == 0){
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{
					this.$refs.notice.show({
						type: 'success',
						message: result.msg
					})
					this.list = []
					uni.setStorageSync('business',result.data)
					this.ConcernData()
				}
			},
			//刷新事件
			refresh() 
			{
				this.triggered = true;
				this.finished = false;

				this.list = []

				this.ConcernData()
				// console.log(this.postlist)
			},
			loadmore()
			{
				// console.log('上拉加载')
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		overflow-x: hidden;
	}
	.search {
		height: 238rpx;
		background-image: url("/static/titlebg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		align-content: center;
	}

	.search-area {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		background-image: url("/static/search.png");
		background-repeat: no-repeat;
		background-size: 30rpx 30rpx;
		background-position: 35rpx 30rpx;
		border-radius: 11rpx;
		line-height: 88rpx;
		text-indent: 78rpx;
		color: #2f2e2e;
		font-size: 30rpx;
	}

	.nav {
		display: flex;
		background-color: #f1f6f9;
		position: relative;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	}

	.nav .nav-item {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}

	.nav .active {
		color: #000;
		font-weight: 600;
	}

	.nav .active-line {
		background-color: #038fff;
		width: 35rpx;
		height: 4rpx;
		position: absolute;
		top: 86rpx;
		transition: left 0.2s;
	}

	.list .item{
		display: flex;
		width:95%;
		margin:10px auto;
	}

	.business{
		width:20%;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 10px;
		margin-right:10px;
	}

	.avatar{
		width:100%;
		height:5em;
	}

	.avatar image{
		width:100%;
		height:100%;
	}

	.info{
		font-size:.9em;
		color:#999;
	}

	.info .nickname, .info .desc{
		margin-bottom:2px;
	}

	.info .nickname{
		font-size:1.1em;
		color:#000;
		font-weight: bold;
	}

	.info .desc{
		font-size:.8em;
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 改成你需要的行数 */
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

</style>
